<template>
	<!-- 领取任务页面 -->
	<view class="content">
		    <view>
		        <view class="tpbg">
		            <view class="tpbg_box">
		                <view class="tpbg_box_left">
		                    <view class="tp_tit">
		                        当天获得奖励
		                    </view>
		                    <view class="tp_span" style="display: flex;align-items: center;">
		                        ¥<view class="money">
		                      
		                        	0
		                        </view>
		                    </view>
		                </view>
		                <view class="tpbg_box_cen"></view>
		                <view class="tpbg_box_right">
		                    <view class="tp_tit">
		                        今日数
		                    </view>
		                    <view class="tp_span">
		                        <view class="money">
		                        	
		                        		0
		                        	</view>
		                    </view>
		                </view>
		            </view>
		            <view class="tp_ti">
		                注：仅统计该任务对应的奖励数据
		            </view>
		        </view>
		    </view>
		    <view>
		   <view class="asd" style="margin-top:-45rpx;">
		       <view class="asd_box">
		           <view class="asd_p">
					   <image src="../../static/li.png" class="li_img" mode="widthFix"></image>
		               <span class="asd_tit">出单奖励（按天计算）</span>
		           </view>
		           <view class="asd_ul" style="width:84%">
		               <view>
		                  <text class="asd_li_span">同时拿到分享+推广(订单金额10元以上）</text>
		               </view>
		           </view>
		       </view>
		   </view>
		    </view>
		    <view>
		    	
		        <view class="asd">
		            <view class="asd_box">
		                <view class="asd_p">
		                    <image src="../../static/li.png" class="li_img" mode="widthFix"></image>
		                    <span class="asd_tit">活动奖励</span>
		                </view>
		                <view class="asd_ul">
		            	
		                    <view>
		                       <text class="asd_ul_span"></text>
		                       <text class="asd_li_span">累计销售8单，奖励60.00元现金</text>
		                    </view>
		                    <view>
		                       <text class="asd_ul_span"></text>
		                       <text class="asd_li_span">累计销售15单，奖励180.00元现金</text>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		        <view class="cen">
		            <view class="asd_box">
		                <view class="asd_p">
		                    <image src="../../static/time.png" class="li_img" mode="widthFix"></image>
		                    <text class="asd_tit">活动时间</text>
		                </view>
		                <view class="time">
		                   2020-09-01 00:00 - 2020-09-30 23:55 
		                </view>
		            </view>
		        </view>
		    <view class="ling_box">
			        	<navigator url="" class="ling" @tap="ling" v-if="jn">立即领取任务</navigator>
						<navigator url="" class="ling" v-else>已领取</navigator>
		    </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				jn:true
			}
		},
		methods:{
			ling(){
				const _this=this;
				uni.showToast({
					title:'领取成功',
					success (){
						_this.jn=false;
					}
				})
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	    .tpbg{
	        width:100%;
	        height:300rpx;
	        background:url("../../static/bgtp.png") repeat-y;
	        background-size:100%;
	        border-radius: 0 0 50rpx 50rpx;
	    }
	    .tpbg_box{
	        width:90%;
	        margin:0 auto;
	        height:200rpx;
	        display: flex;
	        justify-content: flex-start;
	        align-items: center;
	        text-align:center;
	        color:#fff;
	    }
	    .tpbg_box_left,.tpbg_box_right{
	        width: 49%;
	        height: 45%;
	        display: flex;
	        justify-content: space-around;
	        align-items: center;
	        flex-wrap: wrap;
	    }
	    .tpbg_box_cen{
	        width:2rpx;
	        height:50rpx;
	        background:#fff;
	    }
	    .tp_tit{
	        width: 100%;
	        font-size: 28rpx;
	        font-weight: 700;
	    }
	    .tp_span{
	        font-size:28rpx;
	    }
	    .money{
	        font-weight: 700;
	        font-size:30rpx;
	        margin-left:10rpx;
	    }
	    .tp_ti{
	        width: 90%;
	        margin: 0 auto;
	        color: #fff;
	        font-weight: 100;
	        font-size: 28rpx;
	        text-indent: 10rpx;
	    }
	    .re{
	        width:95%;
	        height:2rpx;
	        background:#fff;
	        border-radius:10rpx;
	        margin:0 auto;
	        margin-top: -10rpx;
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-around;
	        align-items: center;
	    }
	    .re_box{
	        width:85%;
	        height:85%;
	        display: flex;
	        flex-wrap: wrap;
	        justify-content:flex-start;
	        align-items: center;
	        overflow:hidden;
	    }
	    .re_tit{
	        font-size:28rpx;
	        font-weight:700;
	        color:#333;
	    }
	    .re_span{
	        color:#5f5f5f;
	        font-size:25rpx;
	        width: 100%;
	    }
	    .asd{
	        width:95%;
	        padding:20rpx 0;
	        margin:20rpx auto;
	        border-radius:10rpx;
	        background:#fff;
	    }
	    .asd_box{
	        width:90%;
	        height:auto;
	        margin:0 auto;
	    }
	    .li_img{
	        width:40rpx;
	    }
	    .asd_tit{
	        font-size:#333;
	        font-size:28rpx;
	        font-weight:700;
	        margin-left:10rpx;
	    }
	    .asd_p{
	        width:100%;
	        margin:0 auto;
	        display: flex;
	        align-items: center;
	        justify-content: flex-start;
	    }
	    .asd_ul{
	        width:88%;
	        margin:0 auto;
	        padding:10rpx 0;
	    }
	    .asd_ul li{
	        width:100%;
	        padding:10rpx 0;
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: flex-start;
	        align-items: center;
	    }
	    .asd_ul_span{
	        width:15rpx;
	        height:15rpx;
	        border-radius:2rpx;
	        background:#ff80c0;
	        margin-right:10rpx;
	    }
	    .asd_li_span{
	        font-size:25rpx;
	        color:#5f5f5f;
	    }
	    .cen{
	        width:95%;
	        margin:0 auto;
	        border-radius:25rpx;
	        background:#fff;
	        padding:20rpx 0;
	    }
	    .time{
	        font-size:25rpx;
	        color:#5f5f5f;
	        margin: 10rpx 0;
	        text-indent: 53rpx;
	    }
	    .ling_box{
	        width: 100%;
	        display: flex;
	        justify-content: space-around;
	        align-items: center;
	        position: fixed;
	        bottom: 80rpx;
	    }
	    .ling{
	        display: inline-flex;
	        justify-content: space-around;
	        align-items: center;
	        width: 80%;
	        height: 90rpx;
	        background: -webkit-linear-gradient(left, rgb(236, 207, 180),#ff80c0);
	        border-radius: 10rpx;
	        color: #fff;
	        font-size: 30rpx;
	        font-weight: 700;
	        letter-spacing: 2rpx;
	    }
	  
	 
</style>
